<template>
<!-- 教室管理 -->
  <div>
    <!-- 搜索/新增 -->
    <div>
      <el-input v-model="formSearch.roomName" placeholder="请输入教室名" class="search"></el-input>
      <el-button type="primary" plain @click="search()">搜索</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button class="add" type="primary" @click="add()">新增</el-button>
    </div>
    <!-- 列表 -->
    <BaseTable
       :tableData="tableData"
       :loading="loading"
       :clickRow="true"
       :page="page"
       @pageChange="pageChange"
      >
      <el-table-column prop="roomName" label="教室名" width="180"></el-table-column>
      <el-table-column prop="tower" label="楼名" width="180"></el-table-column>
      <el-table-column prop="storey" label="楼层" width="160"></el-table-column>
      <el-table-column prop="room" label="教室号" width="160"></el-table-column>
      <el-table-column label="剩余座位" width="300">
        <template slot-scope="s">
          <el-progress v-if="s.row.status!==1" :percentage="parseInt(((s.row.totalSeat-s.row.choosedSeat)/s.row.totalSeat).toFixed(2)*100)" :color="customColors"></el-progress>
          <div v-else> 暂未分配座位 </div> 
        </template>       
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="s">
          <div :style="{'color':statusColor(s.row.status)}">{{ s.row.status | operationTypeStatus }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="introduce" label="备注"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="s">
          <el-button type="text" @click="edit(s.row._id)">编辑教室/修改教室状态</el-button>
          <el-button type="text" class="cell-del-button" @click="remove(s.row._id)">删除</el-button>
          <el-button type="text" @click="allot(s.row._id)" v-if="s.row.status===1">分配座位</el-button>
          <el-button type="text" @click="editSeats(s.row._id)" v-else>编辑座位</el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <!-- 新增弹框 -->
    <Add ref="addDialog" @getListData="initData" :curId="curId"></Add>
    <!-- 分配座位 -->
    <Allot ref="allotDialog" @getListData="initData" :curId="curId"></Allot>
  </div>
</template>

<script>
export default {
  name:'room',
  data(){
    return {
      curId: '',
      tableData: [],
      loading: false,
      formSearch: {
        roomName: ''
      }, 
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
      statusColor: function(val){
		    if(val == 1){
		        return '#FE3D4A' 
		    }else if(val == 2){
		        return '#59A960'
		    }else if(val == 3){
		        return '#FF7F00'
		    }else if(val == 4){
		        return '#A4A9FF'
		    }else if(val == 5){
            return '#F77F6D'
        }
		  },
      customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
      ],
    }
  },
  filters:{
    //状态类型
    operationTypeStatus: function (value) {
     let val
     switch (value) {
    case 1:
      val = "待分配"
      break;
    case 2:
      val = "可用"
      break;
    case 3:
      val = "清理"
      break;
    case 4:
      val = "维修"
      break;
    case 5:
      val = "占用"
      break;
      }
    return val
    },
  },
  activated(){
    this.initData();
  },
  mounted() {
    this.initData();
  },
  components: {
    BaseTable: () => import("components/BaseTable"),
    Add: () => import("views/Room/Add"),
    Allot: () => import("views/Seat/Allot")
  },
  methods:{
    //新增弹窗
    add() {
      this.curId = ''
      this.$refs.addDialog.open()
    },
    //编辑弹窗
    edit(_id) {
      this.curId = _id
      this.$refs.addDialog.open()
    },
    //分配座位
    allot(_id) {
      this.curId = _id
      this.$refs.allotDialog.open()
    },
    //编辑座位
    editSeats(_id) {
      this.curId = _id
      this.$refs.allotDialog.open()
    },
    //搜索
    search(){
      this.page.page = 1 
      this.initData()
    },
    //重置
    reset() {
      this.formSearch.roomName = '',
      this.page.page = 1;
      this.page.total = 0;
      this.initData();
    },
    //分页
    pageChange(val) {
      this.page = val;
      this.initData();
    },
    //列表
    initData() {
     this.loading = true;
     this.$http.get("rooms/listRoom",{ params :{
        page: this.page.page,
        limit: this.page.limit,
        roomName: this.formSearch.roomName
     }})
       .then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.tableData = res.data.data;
          this.page.total = res.data.total;
          console.log(this.tableData,444)
        }
        this.loading = false;
       })
       .catch((err) => {
         this.loading = false;
         this.$message.error("查询数据失败")
       })    
    },
    //删除教室
    remove(_id) {
      this.$confirm('此操作将删除该教室, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$http.delete("rooms/deleteRoom/" + _id)
          .then((res) => {
            console.log(res,456)
            if (res.status === 200) {
             this.tableData = res.data.data;
             this.page.total = res.data.total;
             this.$message.success("删除该教室成功!");
             this.reset();
           }
           this.loading = false;
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error("删除教室失败")
            this.reset();
          })     
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.search{
  width: 15%;
  margin-right: 15px;
}
.add{
  float: right;
  margin-right: 25px;
}
</style>